{% extends 'base.html' %}

{% block content %}

<head>
    <meta charset="UTF-8">
    <title>vote N {{option_id}}</title>
    <script>
 function addOption() {
 var list = document.getElementById("list");
 var counter = document.getElementById("counter");
 if (Number(counter.value) < 7) {
 counter.value = (Number(counter.value) + 1).toString();
 var item = document.createElement("input");
 item.placeholder = "Ваш вариант ответа";
 item.type = "text";
 item.name = "new_" + counter.value;
 var list_item = document.createElement("li");
 list_item.id = "new_" + counter.value + "_li";
 list_item.appendChild(item);
 var div = document.createElement("div");
 div.class = "form-check";
 div.id = "new_" + counter.value + "_div";
 div.appendChild(list_item);
 list.appendChild(div);
 }
 else {
 alert ('Плюрализм - это, конечно, хорошо. Но вы требуете слишком много вариантов голосования!')
 }
 }

 function deleteOption() {
 var list = document.getElementById("list");
 var counter = document.getElementById("counter");
 if (Number(counter.value) > 0) {
 var div = document.getElementById("new_" + counter.value + "_div");
 list.removeChild(div);
 counter.value = (Number(counter.value) - 1).toString();
 }
 else {
 alert('Нечего удалять(')
 }
 }


    </script>
</head>
<body>

<div class="card m-2 w-100 flex-fill" style="width: 18rem;">
    <div class="card-body bg-d">
        <h5 class="card-title">{{ voting.question }}</h5>
        <h6 class="card-subtitle mb-2 text-muted">{{ voting.author }}</h6>
        <form action="/edit/{{ voting.id }}" method="POST">
            {% if mode == 3 and need_buttons %}
            <label class="btn btn-primary" onclick="addOption()">+</label>
            <input type="text" id="counter" disabled="true" style="width: 50px" value="{{opt_len}}">
            <label class="btn btn-primary" onclick="deleteOption()">-</label>
            {% endif %}
            {% if mode == 2 %}
            {% for option in voting.options %}
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="answer_{{ option.id }}"
                       value="{{ option.id }}">
                <label id="{{option.id}}_text" class="form-check-label" for="exampleRadios1">
                    {{ option.text }}
                </label>
            </div>
            {% endfor %}
            {% else %}
            <ul id="list">
                {% for option in voting.options %}
                <div class="form-check">
                    <li id="{{ option.id }}_li">
                        <label id="{{option.id}}_text" class="form-check-label" for="exampleRadios1">{{ option.text }}
                        </label>
                        {% if mode == 1 %}
                        <p style="white-space: nowrap" id="{{option.id}}_votes">Классов: {{ option.vote_count }}</p>
                        {% endif %}
                    </li>
                </div>
                {% endfor %}
            </ul>
            {% if mode == 3 %}
            <input type="hidden" value={{ count_options }} id="count_options">
            {% endif %}
            {% endif %}
            {% if need_buttons %}
            {% csrf_token %}
            {% if mode == 1 %}
            <input class="btn btn-primary" type="submit" value="Удалить варианты" name="delete_option">
            <input class="btn btn-success" type="submit" value="Добавить варианты" name="add_option">
            <input class="btn btn-danger" type="submit" value="Удалить голосование" name="delete">
            {% elif mode == 2 %}
            <input class="btn btn-danger" type="submit" value="Удалить выбранные" name="delete_selected">
            {% elif mode == 3 %}
            <input class="btn btn-success" type="submit" value="Готово" name="done">
            {% endif %}
        </form>
        {% endif %}
        {% if deleted %}
        <h4>Это голосование удалено</h4>
        {% endif %}
        {% if deleted_option %}
        <h4>Удалено</h4>
        {% endif %}
        {% if add_option %}
        <h4>Варианты добавлены</h4>
        {% endif %}
    </div>
</div>

</body>
</html>

{% endblock %}
